/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { Button, Form, Input, Toast } from "antd-mobile";
import Navbars from "../../computents/Navbars";
import styles from "./css/reg.module.css";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { LoginApi } from "../../api/info";
import { useNavigate } from "react-router-dom";
import { useFd } from "../../hook";


function login() {
  const [visible, setVisible] = useState(false);
  let nav=useNavigate()
    let fd=useFd()
  const [form]=Form.useForm()
  const onFinish=async(values)=>{
    const {data:res}=await LoginApi(values)
    // console.log(res);
    localStorage.setItem('token',res.token)
    nav('/')
  }
  return (
    <div className={styles.box}>
      <Navbars />
      <div className={styles.reg}>
        <h1>登录</h1>
        <Form
        form={form}
        onFinish={fd(onFinish)}
          layout="horizontal"
          mode="card"
          footer={
            <Button
              block
              type="submit"
              color="danger"
              size="large"
              shape="rounded"
            >
              登录
            </Button>
          }
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "电子邮件不能为空" },
            ]}
          >
            <Input placeholder="输入你的电子邮箱" />
          </Form.Item>
          <Form.Item
            name="password"
            extra={
              <div className={styles.eye}>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="输入您的密码"
              clearable
              type={visible ? "text" : "password"}
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default login;
